<template>
  <el-select placeholder="请选择" v-model="selectedValue" multiple @change="handleSelectChange" @remove-tag="removeTag"
    style="width:80%">
    <el-option v-for="  option  in  item.selectOption " :key="option.selectId" :label="option.selectContent"
      :value="option.selectId" v-show="!option.disabled" />
    <el-option label="暂无可选选项" value="no" disabled />
  </el-select>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    item: {
      type: Object,
      required: true
    },
  },
  emits: ['handleDisabled', 'update:value'],
  setup(props, { emit }) {
    const selectedValue = ref([]);
    function handleSelectChange() {
      emit('handleDisabled', props.item.apiFieldInfoId, selectedValue.value);
    }
    function removeTag(selectOptions) {
      emit('onHandleCanSelect', props.item.apiFieldInfoId, selectOptions);
    }
    watch(selectedValue, (newValue) => {
      emit('update:value', newValue);
    });

    return {
      selectedValue,
      handleSelectChange,
      removeTag
    };
  }
};
</script>